<script setup>
import { ref, inject } from "vue";
import geoData from "@/assets/address/data_geo.json";

const area = ref({});
const areaChange = inject("areaChange");

const aValue = ref("");
const bValue = ref("");
const aOptions = ref([]);
const bOptions = ref([]);
const init = () => {
  aOptions.value = geoData.filter((item) => {
    return item.value.toString().length === 2;
  });
};
init();

const aHandleChange = () => {
  bOptions.value = geoData.filter((item) => {
    return (
      item.value.toString().startsWith(aValue.value) &&
      item.value.toString().length === 4
    );
  });
};

const bHandleChange = () => {
  bOptions.value.some((item) => {
    if (item.value === bValue.value) {
      area.value.geo = item.geo;
      area.value.id = item.value;
      areaChange(area.value);
      return true;
    }
  });
};
</script>

<template>
  <div id="container">
    <!-- 省 -->
    <el-select
      @change="aHandleChange"
      v-model="aValue"
      :teleported="false"
      class="select_box s1"
      placeholder="请选择省"
    >
      <el-option
        v-for="item in aOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <!-- 市 -->
    <el-select
      @change="bHandleChange"
      v-model="bValue"
      class="select_box s2"
      placeholder="请选择市"
    >
      <el-option
        v-for="item in bOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .select_box {
    width: 49%;
    :deep(.el-select__placeholder) {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff !important;
    }
    :deep(.el-select__wrapper) {
      height: 42px;
      box-shadow: 0 0 0 1px #204c42 inset !important;
    }
    :deep(.el-select__caret) {
      color: #ffffff !important; // 清除按钮
    }
  }
  .s1 {
    :deep(.el-select__wrapper) {
      background-color: rgba(253, 145, 51, 1) !important;
    }
  }
  .s2 {
    :deep(.el-select__wrapper) {
      background-color: rgba(246, 209, 14, 1) !important;
    }
  }
}
</style>